import React, { useEffect, useContext } from 'react';
import Chip from '@mui/material/Chip';
import { styled } from '@mui/system';

const ChipContainer = styled('div')({
  position: 'relative',
  display: 'inline-block'
});

const CopyableText = styled('span')({
  position: 'absolute',
  top: '50%',
  transform: 'translateY(-50%)',
  left: 8,
  color: 'black',
  zIndex: 2,
  pointerEvents: 'none',
  fontSize: '0.8125rem'
});

const CustomChip = styled(Chip)({
  position: 'relative',
  zIndex: 1,
  userSelect: 'none', // 确保Chip不能被选择
  '& .MuiChip-label': {
    color: 'transparent'
  },
  '& .MuiChip-deleteIcon': {
    pointerEvents: 'all'
  }
});

function MyComponent({ displayContent, copyContent, contentMapping, setContentMapping }) {
  useEffect(() => {
    setContentMapping((prevMapping) => ({
      ...prevMapping,
      [displayContent]: copyContent
    }));
  }, [displayContent, copyContent, setContentMapping]);

  return (
    <ChipContainer>
      <CustomChip label={displayContent} />
      <CopyableText>{displayContent}</CopyableText>
    </ChipContainer>
  );
}
// abcd${test2}123${test2}789

export default MyComponent;
